<!-- 主播端首页 -->
<template>
  <div id="LiveControlHome">
    <c-title text="主播"></c-title>
    <div class="main-content">
      <div class="flex">
        <div class="top-img">
          <img :src="info.avatar" alt="" />
        </div>
        <div class="padding-10 f-grow-1">
          <div class="f-20 f-bold t-l">{{ info.nickname }}</div>
          <div class="f-11 flex margin-top-6">
            <div class="level-box tag-box flex">
              <div class="level-num">LV{{ info.level }}</div>
              <div class="level-name">{{ info.level_name }}</div>
            </div>
            <div class="tag-box uid-box margin-left-6">ID: {{ info.id }}</div>
          </div>
          <div @click.stop="memberInfoPop = true" class="line-clamp-2 color-999999 f-12 margin-top-6 t-l">{{ info.synopsis || "你还没有填写个人简介，点击添加" }}</div>
        </div>
        <div @click.stop="memberInfoPop = true">
          <i class="iconfont icon-icon_edit f-20"></i>
        </div>
      </div>

      <div class="flex-j-sb margin-top-10">
        <div class="flex-a-c">
          <div class="f-12 color-6E6E79">发布</div>
          <div class="f-15 f-bold margin-left-4">{{ info.room_count }}</div>
        </div>

        <div class="flex-a-c">
          <div class="f-12 color-6E6E79">观看</div>
          <div class="f-15 f-bold margin-left-4">{{ info.view_count }}</div>
        </div>

        <div class="flex-a-c" @click.stop="toUrl('LiveControlFans', { id: 0 })">
          <div class="f-12 color-6E6E79">粉丝</div>
          <div class="f-15 f-bold margin-left-4">{{ info.fan_count }}</div>
        </div>

        <div class="flex-a-c" @click.stop="toUrl('LiveControlFans', { id: 1 })">
          <div class="f-12 color-6E6E79">关注</div>
          <div class="f-15 f-bold margin-left-4">{{ info.follow_count }}</div>
        </div>
      </div>
    </div>

    <div class="list-tabs">
      <van-tabs v-model="activeName" sticky line-width="16px" @change="handleClick" :offset-top="40">
        <van-tab title="开播申请">
          <template v-if="dataList[0] && dataList[0].list.length > 0">
            <vue-masonry-wall ref="masonryWall_0" class="masonry-wall-theme" :items="dataList[0].list" :options="{ width: 172, padding: 5 }">
              <template v-slot:default="{ item, index }">
                <div :key="i" @click.stop="toCreateRoom(item.id, item.status)">
                  <div class="video-img-box">
                    <img class="video-img" v-lazy="item.cover" alt="" />
                    <div class="live_info flex-j-sb">
                      <div class="video-status video-status-1" v-if="item.status == 1">审核中</div>
                      <div class="bg-000000 border-radius-12 flex-a-c f-11" v-if="item.status == 2">
                        <div class="video-status">未开始</div>
                        <div style="padding: 0 8px 0 2px;">
                          <van-count-down :time="fun.getTimeDifference(fun.getTimestamp(item.live_time))" @finish="finishCountDown(index)" style="color: #fff;font-size: 12px;">
                            <template #default="timeData">
                              <span class="block" v-if="timeData.days">{{ timeData.days }}天 </span>
                              <span class="block">{{ timeData.hours > 9 ? timeData.hours : "0" + timeData.hours }}</span>
                              <span class="colon">:</span>
                              <span class="block">{{ timeData.minutes > 9 ? timeData.minutes : "0" + timeData.minutes }}</span>
                              <span class="colon">:</span>
                              <span class="block">{{ timeData.seconds > 9 ? timeData.seconds : "0" + timeData.seconds }}</span>
                            </template>
                          </van-count-down>
                        </div>
                      </div>
                      <div class="bg-000000 border-radius-12 flex-a-c f-11" v-if="item.status == -2">
                        <div class="video-status">已开始</div>
                        <div style="padding: 0 8px 0 2px;">等待开播</div>
                      </div>
                      <div class="video-status video-status-3 flex-a-c" v-if="item.status == 3">
                        <div class="AmlIcon">
                          <div></div>
                          <div></div>
                          <div></div>
                        </div>
                        直播中
                      </div>
                      <div class="video-status" v-if="item.status == 4">已结束</div>
                      <div @click.stop="onCopyLiveURL(item)" class="bg-000000 border-radius-6 flex-a-c icon-box">
                        <i class="iconfont icon-fenxiang1 f-12"></i>
                      </div>
                    </div>
                    <div class="cate_name f-12"># {{ item.cate_name }}</div>
                  </div>
                  <div class="flex-column margin-top-4 t-l">
                    <div class="f-14 f-bold color-000000 line-clamp-2">{{ item.title }}</div>
                    <div class="margin-top-2 flex-a-c flex-j-sb f-11 color-999999">
                      <div>{{ fun.timestampToTime(item.live_time) }}</div>
                      <div class="flex-a-c">
                        <i class="iconfont icon-a-ht_basis_shangpin_huaban1_huaban1 f-14"></i>
                        <div class="f-12">{{ item.goods_num }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </vue-masonry-wall>
          </template>
          <van-empty image="search" description="正在获取数据..." v-else-if="isLoading" />
          <van-empty image="error" description="暂无开播记录~" v-else-if="!isLoading && dataList[0] && !dataList[0].list.length" />
        </van-tab>
        <van-tab title="直播记录">
          <template v-if="dataList[1] && dataList[1].list.length > 0">
            <vue-masonry-wall ref="masonryWall_0" class="masonry-wall-theme" :items="dataList[1].list" :options="{ width: 172, padding: 5 }">
              <template v-slot:default="{ item }">
                <div :key="i">
                  <div class="video-img-box">
                    <img class="video-img" v-lazy="item.cover" alt="" />
                    <div class="live_info flex-j-sb">
                      <div class="video-status">已结束</div>
                    </div>
                    <!-- <div class="cate_name f-12"># {{ item.cate_name }}</div> -->
                  </div>
                  <div class="flex-column margin-top-4 t-l">
                    <div class="f-14 f-bold color-000000 line-clamp-2">{{ item.title }}</div>
                    <div class="margin-top-2 flex-a-c flex-j-sb f-11 color-999999">
                      <div>{{ fun.timestampToTime(item.live_time) }}</div>
                      <div class="flex-a-c">
                        <i class="iconfont icon-a-ht_basis_shangpin_huaban1_huaban1 f-14"></i>
                        <div class="f-12">{{ item.goods_num }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </vue-masonry-wall>
          </template>
          <van-empty image="search" description="正在获取数据..." v-else-if="isLoading" />
          <van-empty image="error" description="暂无直播记录~" v-else-if="!isLoading && dataList[1] && !dataList[1].list.length" />
        </van-tab>
      </van-tabs>
      <div style="height: 8rem;"></div>
    </div>

    <div class="fixed-bottom padding-10 flex set-pc-styleLeft">
      <!-- <van-button @click="toBack" type="primary" plain block round color="#FF3737" style="width: 160px;margin-right: 10px;">返回</van-button> -->
      <van-button
        v-if="anchorState == 0 || anchorState == 1"
        @click.stop="toCreateRoom('')"
        :disabled="anchorState == -1"
        type="primary"
        block
        round
        color="linear-gradient(to right, #FF3A93, #FF3737)"
      >
        我要开播
      </van-button>
      <van-button v-else @click.stop="toCertiCfication" type="primary" block round color="linear-gradient(to right, #FF3A93, #FF3737)">
        {{ anchorState == -1 ? "开播认证" : "认证审核中" }}
      </van-button>
    </div>

    <van-popup v-model="showCertiCficationPop" class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">主播开播认证</div>
      <div class="pop-base-content">
        <van-cell-group>
          <van-field v-model="realName" required label="真实姓名" placeholder="请输入真实姓名" />
          <van-field v-model="mobile" required label="手机号" placeholder="请输入手机号" />
          <van-field v-model="id_card" required label="身份证号" placeholder="请输入身份证号" />
          <van-field v-model="address" required label="联系地址" placeholder="请输入联系地址" />
          <van-field name="uploader" required label="身份证正面(国徽面)" @click="uploaderImg('full_face_photo')">
            <template #input>
              <van-uploader v-model="full_face_photo" max-count="1" :after-read="afterRead" :delete="onDelete" />
            </template>
          </van-field>
          <van-field name="uploader" required label="身份证反面(人像面)" @click="uploaderImg('reverse_photo')">
            <template #input>
              <van-uploader v-model="reverse_photo" max-count="1" :after-read="afterRead" :delete="onDelete" />
            </template>
          </van-field>
          <van-field name="uploader" required label="手持身份证(手持证件)" @click="uploaderImg('hand_held_photo')">
            <template #input>
              <van-uploader v-model="hand_held_photo" max-count="1" :after-read="afterRead" :delete="onDelete" />
            </template>
          </van-field>
        </van-cell-group>
      </div>
      <div class="pop-base-bottom ">
        <div class="flex-a-c padding-bottom-10">
          <van-checkbox v-model="checkedCertification" checked-color="var(--themeBaseColor)"></van-checkbox>
          <span class="color-6E6E79 f-14 margin-left-10">我已阅读并同意</span>
          <span class="f-14 themeColor" @click.stop="anchorAgreementPop = true">《主播协议》</span>
        </div>
        <div class="flex">
          <van-button @click="showCertiCficationPop = false" plain round type="danger" color="var(--themeBaseColor)" block style="height: 40px;margin-right: 10px;">暂不认证</van-button>
          <van-button @click="subCertification" round type="danger" color="var(--themeBaseColor)" block style="height: 40px;">提交</van-button>
        </div>
      </div>
    </van-popup>

    <van-popup v-model="anchorAgreementPop" class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;">
      <div class="pop-base-title">申请协议</div>
      <div class="pop-base-content">
        <div v-html="anchorAgreementInfo"></div>
      </div>
      <div class="pop-base-bottom" @click.stop="anchorAgreementPop = false">
        <van-button round type="danger" color="var(--themeBaseColor)" block style="height: 40px;">确认</van-button>
      </div>
    </van-popup>

    <van-popup v-model="memberInfoPop" class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;">
      <div class="pop-base-title">编辑资料</div>
      <div class="pop-base-content">
        <van-cell-group>
          <van-field v-model="info.nickname" @click.stop="showMemberInfoPop(1)" is-link readonly label="昵称" placeholder="点击编辑主播昵称" />
          <van-field v-model="info.synopsis" @click.stop="showMemberInfoPop(2)" is-link readonly label="简介" placeholder="点击编辑主播简介" />
        </van-cell-group>
      </div>
      <div class="pop-base-bottom" @click.stop="memberInfoPop = false">
        <van-button round type="danger" color="var(--themeBaseColor)" block style="height: 40px;">关闭</van-button>
      </div>
    </van-popup>

    <van-popup v-model="editInfoPop" closeable class="pop-base-class t-l" position="bottom" round style="background-color: #F5F5F5;">
      <!-- 1-昵称 2-简介 -->
      <div class="pop-base-title">修改{{ editType == 1 ? "昵称" : "简介" }}</div>
      <div class="pop-base-content">
        <van-field v-model="editInfoField" rows="1" autosize type="textarea" :placeholder="`请输入${editType == 1 ? '昵称' : '简介'}`" />
      </div>
      <div class="pop-base-bottom" @click.stop="subEditInfo">
        <van-button round type="danger" color="var(--themeBaseColor)" block style="height: 40px;">确认</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import VueMasonryWall from "vue-masonry-wall";
import { scrollMixin } from "utils/mixin";

export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      isLoading: true,
      anchorState: -1,
      showCertiCficationPop: false,
      info: {},
      activeName: 0,
      dataList: [],
      titleArr: [],

      checkedCertification: false,
      anchorAgreementPop: false,
      anchorAgreementInfo: null,
      realName: "", //真实姓名
      mobile: "", //手机号
      id_card: "", //身份证号
      address: "", //联系地址
      full_face_photo: [], //身份证正面(国徽面)
      reverse_photo: [], //身份证反面(人像面)
      hand_held_photo: [], //手持身份证(手持证件)

      memberInfoPop: false,
      editInfoField: "",
      editInfoPop: false
    };
  },

  activated() {
    this.getData();
    this.init();
  },

  components: { VueMasonryWall },

  computed: {},

  mounted() {},

  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.room.frontend.member.index", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.info = data;
      this.getPremiere(); //首播验证
    },
    async getPremiere() {
      let { result, msg, data } = await $http.get("plugin.room.frontend.anchor.premiere-validate", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.anchorState = data.state;
      if (this.anchorState == -1) {
        this.getAgreement();
      }
    },
    async getAgreement() {
      let { result, msg, data } = await $http.get("plugin.room.frontend.anchor.get-agreement", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.anchorAgreementInfo = data.agreement;
    },
    async subCertification() {
      if (!this.realName) return this.$toast("请输入真实姓名");
      if (!this.mobile) return this.$toast("请输入手机号");
      if (!this.id_card) return this.$toast("请输入身份证号码");
      if (!this.address) return this.$toast("请输入联系地址");
      if (!this.full_face_photo_url) return this.$toast("请上传身份证(国徽面)");
      if (!this.reverse_photo_url) return this.$toast("请上传身份证(人像面)");
      if (!this.hand_held_photo_url) return this.$toast("请手持证件拍照上传");
      let json = {
        realName: this.realName,
        mobile: this.mobile,
        id_card: this.id_card,
        address: this.address,
        full_face_photo: this.full_face_photo_url,
        reverse_photo: this.hand_held_photo_url,
        hand_held_photo: this.reverse_photo_url
      };

      if (!this.checkedCertification) return this.$toast("请先阅读主播协议");

      let { result, msg, data } = await $http.post("plugin.room.frontend.anchor.launch-certification", json, ".");
      this.$toast(msg);
      if (result == 0) return;
      this.anchorAgreementPop = false;
      this.getData();
      this.init();
      this.getPremiere(); //首播验证
    },
    init() {
      let titleArr = [
        {
          name: "开播申请",
          url: "plugin.room.frontend.member.live"
        },
        {
          name: "直播记录",
          url: "plugin.room.frontend.member.record"
        }
      ];
      this.isLoadMore = true;
      this.titleArr = titleArr;
      this.setNewArr();
    },
    setNewArr() {
      let _dataList = [];
      this.titleArr.forEach((val, index) => {
        _dataList.push({
          url: val.url,
          isLoadMore: false,
          loading: false,
          finished: false,
          page: 1,
          total_page: 0,
          list: []
        });
      });
      this.dataList = _dataList;
      this.handleClick();
    },
    async handleClick() {
      this.isLoading = true;
      let { result, msg, data } = await $http.get(this.dataList[this.activeName].url, {}, ".");
      if (result == 0) {
        this.isLoading = false;
        this.$toast(msg);
        return;
      }
      this.dataList[this.activeName].list = data.data;
      this.dataList[this.activeName].isLoadMore = false;
      this.dataList[this.activeName].page = 1;
      this.dataList[this.activeName].total_page = data.last_page;
      if (this.dataList[this.activeName].page >= this.dataList[this.activeName].total_page) {
        this.dataList[this.activeName].isLoadMore = true;
      }
      this.isLoading = false;
      this.refreshLayout();
    },
    async getMoreData() {
      this.dataList[this.activeName].isLoadMore = false;
      if (this.dataList[this.activeName].page >= this.dataList[this.activeName].total_page) {
        this.dataList[this.activeName].isLoadMore = true;
        return;
      } else {
        this.dataList[this.activeName].page = this.dataList[this.activeName].page + 1;
        let { result, msg, data } = await $http.get(this.dataList[this.activeName].url, { page: this.dataList[this.activeName].page }, ".");
        if (result == 0) {
          this.dataList[this.activeName].isLoadMore = false;
          this.dataList[this.activeName].page = this.dataList[this.activeName].page - 1;
          return this.$toast(msg);
        }

        this.dataList[this.activeName].list = this.dataList[this.activeName].list.concat(data.data);
        this.dataList[this.activeName].isLoadMore = false;
      }
    },
    refreshLayout() {
      this.$nextTick(() => {
        if (this.$refs.masonryWall_1) {
          this.$refs[`masonryWall_${this.activeName}`].$resize();
        }
      });
    },
    toCreateRoom(id = null, status) {
      if (status == 1) return this.$toast("直播审核中");
      if (status == 4) return this.$toast("直播已结束");
      if (id) {
        this.$router.push(this.fun.getUrl("LiveControlCreate", { id: id }));
      } else {
        this.$router.push(this.fun.getUrl("LiveControlCreate", {}));
      }
    },
    toCertiCfication() {
      if (this.anchorState == 2) {
        return this.$toast("认证审核中");
      }
      if (this.anchorState == -1) {
        this.showCertiCficationPop = true;
      }
    },
    uploaderImg(name) {
      this.uploaderName = name;
    },
    afterRead(file) {
      let uploadLoading = this.$toast.loading({
        message: "上传中",
        duration: 0
      });

      let fd = new FormData();
      fd.append("file", file.file);

      axios
        .post(this.fun.getRealUrl("upload.uploadPic"), fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(({ data }) => {
          if (data.result == 1) {
            this[`${this.uploaderName}_url`] = data.data.img;
          } else {
            this[this.uploaderName] = [];
          }
          uploadLoading.clear();
        })
        .catch(() => {
          this.$toast("上传失败");
          uploadLoading.clear();
        });
    },
    onDelete() {
      this[this.uploaderName] = [];
    },
    showMemberInfoPop(type) {
      this.edittype = type;
      this.editname = type == 1 ? "nickname" : "synopsis";
      this.editInfoField = this.info[this.editname];
      this.editInfoPop = true;
    },
    async subEditInfo() {
      let { result, msg, data } = await $http.post(
        "plugin.room.frontend.member.update-basic",
        {
          up_type: this.edittype,
          keyword: this.editInfoField
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      this.info[this.editname] = this.editInfoField;
      this.editInfoPop = false;
    },
    toBack() {
      try {
        this.$router.go(-1);
      } catch (e) {
        this.$router.push(this.fun.getUrl("home", {}));
      }
    },
    onCopyLiveURL(item) {
      let desc = "邀请您加入直播间：" + item.title + "\n";
      let link = `${this.fun.getSiteRoot()}/addons/yun_shop/?menu#/livePage?i=${this.fun.getKeyByI()}&mid=${this.fun.getKeyByMid()}&shareType=livePlay&room_id=${item.id}`;
      this.$copyText(`${desc}${link}`).then(
        e => {
          this.$toast("复制成功");
        },
        e => {
          this.$toast("复制失败");
        }
      );
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    finishCountDown(index){
      this.dataList[0].list[index].status = -2;
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.pop-base-title {
  margin: 18px 12px 12px !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  text-align: left !important;
}
.pop-base-class .pop-base-content {
  min-height: 39vh;
  max-height: 60vh;
  overflow: scroll;
  padding: 0 0.75rem 3.75rem;
}
.pop-base-class .pop-base-bottom {
  padding: 0.625rem 0.875rem;
  background: #ffffff;
}
.color-6E6E79 {
  color: #6e6e79;
}
.main-content {
  background: linear-gradient(190deg, #fedbef 0%, #f2e3f5 50%, #f5f5f5 100%);
  padding: 1.125rem 1rem 2rem;
  .top-img {
    width: 80px;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: 3px solid #fff;
    }
  }
  .tag-box {
    line-height: 18px;
    border-radius: 5px;
  }
  .level-box {
    background: #f9d3dc;
    .level-num {
      background: linear-gradient(239deg, #ff4bd6 0%, #ff3979 64%, #ffa837 100%);
      color: #fff;
      padding: 0 4px;
      border-radius: 5px;
    }
    .level-name {
      color: #df3e64;
      padding: 0 4px;
    }
  }
  .uid-box {
    background: #dcdcef;
    color: #6e6e79;
    padding: 0 4px;
  }
}
.list-tabs {
  background: #fff;
  border-radius: 15px 15px 0px 0px;
  margin-top: -1rem;
  overflow: hidden;
  ::v-deep .van-tab {
    flex: none;
    margin: 0 1rem;
  }
  ::v-deep .van-tab--active {
    color: #000000;
    font-size: 1rem;
    font-weight: bold;
  }
}
.masonry-wall-theme {
  padding: 0.75rem;
  .video-img-box {
    position: relative;
  }
  .video-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    border-radius: 8px 8px 8px 8px;
  }
  .cate_name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: left;
    padding: 0.5rem;
    color: #fff;
    text-shadow: #666666 0px 0px 5px;
  }
  .live_info {
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 1.125rem;
    padding: 0 0.3125rem;
    margin: 0.5rem 0;
    color: #fff;
  }
}
.masonry-wall-theme ::v-deep .masonry-column,
.masonry-wall-theme ::v-deep .masonry-item {
  overflow: hidden;
}
.border-radius-6 {
  border-radius: 6px;
}
.border-radius-12 {
  border-radius: 12px;
}
.bg-000000 {
  background: rgba(0, 0, 0, 0.3);
}
.video-status {
  line-height: 1.125rem;
  padding: 0 6px;
  border-radius: 12px;
  font-size: 11px;
  background: linear-gradient(270deg, #ff8a24 0%, #ff600d 100%);
}
.video-status-1 {
  background: linear-gradient(90deg, #5b23f8 0%, #2765f5 100%);
}
.video-status-3 {
  background: linear-gradient(90deg, #f92036 0%, #ff2189 100%);
}
.icon-box {
  width: 1.25rem;
  height: 1.25rem;
  justify-content: center;
}
.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 100;
  box-shadow: 0px 0 5px 1px #f5f5f5;
}

.AmlIcon {
  display: flex;
  justify-content: space-between;
  margin-right: 2px;
}
.AmlIcon div {
  width: 2px;
  height: 10px;
  border-radius: 1px;
  background-color: #fff;
}
.AmlIcon div:nth-child(1) {
  transform: scaleY(0.2);
  animation: mymove1 0.6s 0.1s infinite linear alternate;
}
.AmlIcon div:nth-child(2) {
  margin: 0px 2px;
  transform: scaleY(1);
  animation: mymove2 0.6s 0.4s infinite linear alternate;
}
.AmlIcon div:nth-child(3) {
  transform: scaleY(0.1);
  animation: mymove3 0.6s 0.4s infinite linear alternate;
}
@keyframes mymove1 {
  0% {
    transform: scaleY(0.2);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes mymove2 {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0.3);
  }
}
@keyframes mymove3 {
  0% {
    transform: scaleY(0.1);
  }
  100% {
    transform: scaleY(1);
  }
}
</style>
